<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="search-input">
				<u-icon name="search" size="30" color="#909399"></u-icon>
				<input 
					class="input" 
					type="text" 
					v-model="keyword" 
					placeholder="搜索桶装水" 
					confirm-type="search"
					@confirm="search"
				/>
				<u-icon v-if="keyword" name="close" size="30" color="#909399" @click="clearKeyword"></u-icon>
			</view>
			<view class="cancel-btn" @click="goBack">取消</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view
				class="filter-item"
				:class="{active: sortType === 'id'}"
				@click="changeSort('id')"
			>
				<text>综合</text>
			</view>

			<view
				class="filter-item"
				:class="{active: sortType === 'sales'}"
				@click="changeSort('sales')"
			>
				<view class="price-sort">
					<text :class="{active: sortType === 'sales'}">销量</text>
					<view class="sort-icon">
						<u-icon
							name="arrow-up-fill"
							size="18"
							:color="sortType === 'sales' && sortOrder === 'asc' ? '#2979ff' : '#c0c4cc'"
						></u-icon>
						<u-icon
							name="arrow-down-fill"
							size="18"
							:color="sortType === 'sales' && sortOrder === 'desc' ? '#2979ff' : '#c0c4cc'"
						></u-icon>
					</view>
				</view>
			</view>
			<view
				class="filter-item"
				:class="{active: sortType === 'price'}"
				@click="changeSort('price')"
			>
				<view class="price-sort">
					<text :class="{active: sortType === 'price'}">价格</text>
					<view class="sort-icon">
						<u-icon
							name="arrow-up-fill"
							size="18"
							:color="sortType === 'price' && sortOrder === 'asc' ? '#2979ff' : '#c0c4cc'"
						></u-icon>
						<u-icon
							name="arrow-down-fill"
							size="18"
							:color="sortType === 'price' && sortOrder === 'desc' ? '#2979ff' : '#c0c4cc'"
						></u-icon>
					</view>
				</view>
			</view>
			<view
				class="filter-item"
				:class="{active: sortType === 'create_time'}"
				@click="changeSort('create_time')"
			>
				<view class="price-sort">
					<text :class="{active: sortType === 'create_time'}">时间</text>
					<view class="sort-icon">
						<u-icon
							name="arrow-up-fill"
							size="18"
							:color="sortType === 'create_time' && sortOrder === 'asc' ? '#2979ff' : '#c0c4cc'"
						></u-icon>
						<u-icon
							name="arrow-down-fill"
							size="18"
							:color="sortType === 'create_time' && sortOrder === 'desc' ? '#2979ff' : '#c0c4cc'"
						></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<scroll-view 
			scroll-y 
			class="product-container"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<view v-if="loading && page === 1" class="loading-box">
				<u-loading mode="circle" size="36"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>

			<view v-else-if="productList.length === 0" class="empty-box">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				<text class="empty-text">暂无商品</text>
			</view>

			<view v-else class="product-grid">
				<view
					v-for="item in productList"
					:key="item.id"
					class="product-item"
					@click="goToDetail(item.id)"
				>
					<image class="product-image" :src="item.thumbnail || '/static/images/default-product.png'" mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-name">{{item.name}}</text>
						<view class="product-price-box">
							<text class="product-price">¥{{item.price}}</text>
							<text v-if="item.support_points" class="product-points">{{item.points_price}}积分</text>
						</view>
						<view class="product-meta">
							<text class="product-sales">已售{{item.sales}}件</text>
							<view class="buy-btn">购买</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="loading && page > 1" class="loading-more">
				<u-loading mode="circle" size="24"></u-loading>
				<text>加载中...</text>
			</view>

			<view v-if="!loading && !hasMore" class="no-more">
				<text>没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '', // 搜索关键词
				loading: false, // 加载状态
				productList: [], // 商品列表
				page: 1, // 当前页码
				pageSize: 10, // 每页数量
				hasMore: true, // 是否有更多数据
				refreshing: false, // 下拉刷新状态
				sortType: 'id', // 排序类型：id(综合)、sales(销量)、price(价格)、newest(上新)
				sortOrder: 'desc', // 排序方向：asc(升序)、desc(降序)
				categoryId: 0, // 分类ID
				productType: 'water' // 产品类型：water(桶装水)
			}
		},
		onLoad(options) {
			// 获取参数
			if (options.categoryId) {
				this.categoryId = parseInt(options.categoryId);
			}
			
			if (options.keyword) {
				this.keyword = options.keyword;
			}
			
			if (options.productType) {
				this.productType = options.productType;
			}
			
			// 加载商品列表
			this.loadProductList();
		},
		methods: {
			// 切换排序方式
			async changeSort(type) {
				if (type === 'price') {
					// 价格排序特殊处理
					if (this.sortType === 'price') {
						// 已经是价格排序，切换排序方向
						this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
					} else {
						// 切换为价格排序，默认升序
						this.sortType = 'price';
						this.sortOrder = 'asc';
					}
				} else {
					// 其他排序类型
					if (this.sortType === type) return;
					
					this.sortType = type;
					this.sortOrder = 'desc'; // 默认降序
				}
				
				// 重新加载商品列表
				this.page = 1;
				this.hasMore = true;
				this.productList = [];
				
				await this.loadProductList();
			},
			
			// 加载商品列表
			async loadProductList() {
				if (this.loading || (!this.hasMore && this.page > 1)) return;
				
				try {
					this.loading = true;
					
					// 构建请求参数
					const params = {
						pageNo: this.page,
						pageSize: this.pageSize,
						productType: this.productType // 指定为桶装水类型
					};
					
					// 添加分类ID
					if (this.categoryId) {
						params.categoryId = this.categoryId;
					}
					
					// 添加搜索关键词
					if (this.keyword) {
						params.keyword = this.keyword;
					}
					
					// 添加排序参数
					if (this.sortType === 'id') {
						params.sort = 'id';
						params.order = this.sortOrder;
					} else if (this.sortType === 'sales') {
						params.sort = 'sales';
						params.order = this.sortOrder;
					} else if (this.sortType === 'price') {
						params.sort = 'price';
						params.order = this.sortOrder;
					} else if (this.sortType === 'create_time') {
						params.sort = 'create_time';
						params.order = this.sortOrder;
					}
					
					// 发起请求
					const res = await this.$api.getWaterProductList(params);
					
					// 处理响应数据
					if (this.page === 1) {
						this.productList = res.rows || [];
					} else {
						this.productList = [...this.productList, ...(res.rows || [])];
					}
					
					// 更新分页信息
					this.hasMore = this.productList.length < res.total;
					if (this.hasMore) {
						this.page++;
					}
				} catch (error) {
					console.error('加载商品列表出错', error);
					uni.showToast({
						title: '网络异常，请稍后重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.refreshing = false;
				}
			},
			
			// 加载更多
			loadMore() {
				if (!this.loading && this.hasMore) {
					this.loadProductList();
				}
			},
			
			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.page = 1;
				this.hasMore = true;
				this.loadProductList();
			},
			
			// 搜索
			search() {
				if (!this.keyword.trim()) return;
				
				this.page = 1;
				this.hasMore = true;
				this.productList = [];
				this.loadProductList();
			},
			
			// 清除搜索关键词
			clearKeyword() {
				this.keyword = '';
				
				if (this.categoryId) {
					// 如果有分类ID，重新加载该分类的商品
					this.page = 1;
					this.hasMore = true;
					this.productList = [];
					this.loadProductList();
				} else {
					// 否则返回上一页
					this.goBack();
				}
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 跳转到商品详情
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/waterShop/product/detail?id=${id}&productType=${this.productType}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.search-box {
	background-color: #2979ff;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
}

.search-input {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 50rpx;
	padding: 10rpx 30rpx;
}

.input {
	flex: 1;
	height: 60rpx;
	margin: 0 20rpx;
	font-size: 28rpx;
}

.cancel-btn {
	margin-left: 20rpx;
	font-size: 28rpx;
	color: #ffffff;
}

.filter-bar {
	display: flex;
	padding: 20rpx 0;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
}

.filter-item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #666;
}

.filter-item.active {
	color: #2979ff;
	font-weight: bold;
}

.price-sort {
	display: flex;
	align-items: center;
}

.sort-icon {
	display: flex;
	flex-direction: column;
	margin-left: 10rpx;
}

.product-container {
	flex: 1;
	height: 0;
}

.loading-box, .empty-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
}

.loading-text, .empty-text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #999;
}

.product-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 10rpx;
	background-color: #ffffff;
}

.product-item {
	width: 50%;
	padding: 10rpx;
	box-sizing: border-box;
}

.product-image {
	width: 100%;
	height: 320rpx;
	border-radius: 12rpx;
	background-color: #f5f5f5;
}

.product-info {
	padding: 20rpx 10rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.4;
	height: 2.8em;
}

.product-price-box {
	margin-top: 10rpx;
	display: flex;
	align-items: center;
}

.product-price {
	font-size: 32rpx;
	color: #ff5500;
	font-weight: bold;
}

.product-points {
	margin-left: 10rpx;
	font-size: 24rpx;
	color: #ff9500;
}

.product-meta {
	margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-sales {
	font-size: 24rpx;
	color: #999;
}

.buy-btn {
	font-size: 24rpx;
	color: #ffffff;
	background-color: #2979ff;
	padding: 6rpx 20rpx;
	border-radius: 30rpx;
}

.loading-more, .no-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
	font-size: 24rpx;
	color: #999;
}
</style>
